<template>
    <div class="open_cupboard">
        <top-timer :back="false" :second="240"/>
        <p class="font_M font_40 col_333 title center">箱门已开,请放入要洗涤的衣物</p>
        <p class="font_30 col_777 tips center">放完衣物后，请关闭箱门</p>
        <div class="frame font_28 center">
            <div class="row">
                <div class="t80_240" :class="openDoorNum === 'g1'?'is_open':''">g1</div>
                <div class="t80_240" :class="openDoorNum === 'g2'?'is_open':''">g2</div>
                <div class="t80_240" :class="openDoorNum === 'g3'?'is_open':''">g3</div>
                <div class="t160_240 font_28">显示屏</div>
                <div class="t80_240" :class="openDoorNum === 'g4'?'is_open':''">g4</div>
                <div class="t160_240">
                    <div class="t160_80" :class="openDoorNum === 'd1'?'is_open':''">d1</div>
                    <div class="t160_80" :class="openDoorNum === 'd2'?'is_open':''">d2</div>
                    <div class="t160_80" :class="openDoorNum === 'd3'?'is_open':''">d3</div>
                </div>
                <div class="t80_240" :class="openDoorNum === 'g5'?'is_open':''">g5</div>
                <div class="t80_240" :class="openDoorNum === 'g6'?'is_open':''">g6</div>
                <div class="t80_240" :class="openDoorNum === 'g7'?'is_open':''">g7</div>
                <div class="t80_240" :class="openDoorNum === 'g8'?'is_open':''">g8</div>
            </div>
            <div class="row">
                <div class="t80_240" :class="openDoorNum === 'g9'?'is_open':''">g9</div>
                <div class="t80_240" :class="openDoorNum === 'g10'?'is_open':''">g10</div>
                <div class="t80_240" :class="openDoorNum === 'g11'?'is_open':''">g11</div>
                <div class="t160_240">
                    <div class="t160_80 font_28">扫码处</div>
                    <div class="t160_160" :class="openDoorNum === 'b1'?'is_open':''">b1</div>
                </div>
                <div class="t80_240" :class="openDoorNum === 'g12'?'is_open':''">g12</div>
                <div class="t160_240">
                    <div class="t160_80" :class="openDoorNum === 'd4'?'is_open':''">d4</div>
                    <div class="t160_80" :class="openDoorNum === 'd5'?'is_open':''">d5</div>
                    <div class="t160_80" :class="openDoorNum === 'd6'?'is_open':''">d6</div>
                </div>
                <div class="t80_240" :class="openDoorNum === 'g13'?'is_open':''">g13</div>
                <div class="t80_240" :class="openDoorNum === 'g14'?'is_open':''">g14</div>
                <div class="t80_240" :class="openDoorNum === 'g15'?'is_open':''">g15</div>
                <div class="t80_240" :class="openDoorNum === 'g16'?'is_open':''">g16</div>
            </div>
            <div class="row">
                <div class="t80_80" :class="openDoorNum === 'x1'?'is_open':''">x1</div>
                <div class="t80_80" :class="openDoorNum === 'x2'?'is_open':''">x2</div>
                <div class="t80_80" :class="openDoorNum === 'x3'?'is_open':''">x3</div>
                <div class="t80_80" :class="openDoorNum === 'x4'?'is_open':''">x4</div>
                <div class="t80_80" :class="openDoorNum === 'x5'?'is_open':''">x5</div>
                <div class="t80_80" :class="openDoorNum === 'x6'?'is_open':''">x6</div>
                <div class="t160_80" :class="openDoorNum === 'd7'?'is_open':''">d7</div>
                <div class="t80_80" :class="openDoorNum === 'x7'?'is_open':''">x7</div>
                <div class="t80_80" :class="openDoorNum === 'x8'?'is_open':''">x8</div>
                <div class="t80_80" :class="openDoorNum === 'x9'?'is_open':''">x9</div>
                <div class="t80_80" :class="openDoorNum === 'x10'?'is_open':''">x10</div>
            </div>
        </div>
        <top-tips/>
    </div>
</template>

<script>
  export default {
    name: 'receive-open-cupboard',
    data() {
      return {
        openDoorNum: 'd1',
        queryInterval: null,
      };
    },
    destroyed() {
      clearInterval(this.queryInterval);
    },
    created() {
      let boxCode = this.$route.query.boxCode;
      this.openDoorNum = boxCode;
      this.queryInterval = setInterval(() => {
        let success = (res) => {
          if (res === 'false') {
            clearInterval(this.queryInterval);
            this.closeBox();
          }
        };
        let error = (res) => {
          alert('关箱失败' + res);
        };
        let boxMac = this.$boxConfig[boxCode];
        window.cordova.plugins.CabinetPlugin.sendQueryCommand(boxMac, success, error);
      }, 500);
    },
    methods: {
      closeBox() {
        let boxDetailId = this.$route.query.boxDetailId;
        this.$axios.post('receiveClothesRest/createCloseBox', {
          boxCode: this.openDoorNum,
          boxDetailId: boxDetailId,
        }).then(res => {
          if (res.data.result) {
            this.$router.push({path: 'collectConfirm', query: {boxDetailId: boxDetailId, boxCode: this.openDoorNum}});
          } else {
            this.$alert(res.data.msg || '关箱错误');
          }
        });
      },
    },
  };
</script>

<style lang="scss">
    .open_cupboard {
        .title {
            margin: 0.40rem 0 0.20rem;
        }

        .tips {
            margin-bottom: 0.40rem;
        }

        .frame {
            margin: 0 0.60rem;
            overflow: hidden;

            .row {
                overflow: hidden;

                &:first-of-type {
                    > div {
                        border-top: 0.02rem solid #979797;
                    }

                    > div:first-of-type {
                        border-top-left-radius: 0.16rem;
                    }

                    > div:last-of-type {
                        border-top-right-radius: 0.16rem;
                    }
                }

                &:last-of-type {
                    > div:first-of-type {
                        border-bottom-left-radius: 0.16rem;
                    }

                    > div:last-of-type {
                        border-bottom-right-radius: 0.16rem;
                    }
                }

                div {
                    float: left;
                    display: inline-block;
                    border-bottom: 0.02rem solid #979797;
                    border-right: 0.02rem solid #979797;
                }

                > div:first-of-type {
                    border-left: 0.02rem solid #979797;
                }
            }
        }

        .t80_240 {
            width: 0.80rem;
            height: 2.40rem;
        }

        .t160_240 {
            width: 1.60rem;
            height: 2.40rem;
        }

        .t160_80 {
            width: 1.60rem;
            height: 0.80rem;
        }

        .t160_160 {
            width: 1.60rem;
            height: 1.60rem;
        }

        .t80_80 {
            width: 0.80rem;
            height: 0.80rem;
        }

        .is_open {
            background-color: #d9ebfe;
        }
    }
</style>